<form #designOptions="ngForm" novalidate>
  <fieldset>
    <legend>{{'options.design.design' | translate}}</legend>
    <div class="grid cols-6">
      <div class="field span-2">
        <select name="font" id="font"
          [(ngModel)]="settings.config.design.font"
          (ngModelChange)="getFont();"
          [style.fontFamily]="currentFont"
          [style.fontWeight]="currentWeight"
          style="font-size: 1em; font-weight: 400;">
          <option
            [ngValue]="font.id"
            *ngFor="let font of fonts;"
            [style.fontFamily]="setFont(font.family)"
            [style.fontWeight]="font.weight">
            {{font.label}}
          </option>
        </select>
        <label for="font">{{'options.design.font' | translate}}</label>
      </div>
      <div class="field span-2" *ngIf="settings.config.design.font === 0">
        <input type="text" id="customFont" name="customFont" [(ngModel)]="settings.config.design.customFont" autocomplete="off">
        <label title="{{'options.design.customFontDesc' | translate}}">{{'options.design.customFontName' | translate}}</label>
      </div>
      <div class="field span-2" *ngIf="settings.config.design.font === 0">
        <select name="customFontWeight" id="customFontWeight"
          [(ngModel)]="settings.config.design.customFontWeight">
          <option [ngValue]="w.id" *ngFor="let w of fontWeights;">
            {{w.label}}
          </option>
        </select>
        <label title="{{'options.design.fontWeightDesc' | translate}}">{{'options.design.fontWeight' | translate}}</label>
      </div>
      <div class="span-6" *ngIf="settings.config.design.font === 0">
        {{'options.design.customFontUsage' | translate | translateCut:0}}<a href="https://www.adobe.com/products/type/install-instructions.html">{{'options.design.customFontUsage' | translate | translateCut:1}}</a>{{'options.design.customFontUsage' | translate | translateCut:2}}<a href="https://fonts.google.com">{{'options.design.customFontUsage' | translate | translateCut:3}}</a>{{'options.design.customFontUsage' | translate | translateCut:4}}<a href="https://www.1001freefonts.com/">{{'options.design.customFontUsage' | translate | translateCut:5}}</a>{{'options.design.customFontUsage' | translate | translateCut:6}}
      </div>
      <div class="field span-2">
        <options-range name="globalSize" id="globalSize" min="1" max="20" [(ngModel)]="settings.config.design.scaling"></options-range>
        <label title="{{'options.design.globalSizeDesc' | translate}}">{{'options.design.globalSize' | translate}}</label>
      </div>
      <div class="field span-2">
        <options-toggle name="scalingMethod" [(ngModel)]="settings.config.design.scalingMethod"></options-toggle>
        <label title="{{'options.design.dynScaleDesc' | translate}}">{{'options.design.dynScale' | translate}}</label>
      </div>
    </div>
  </fieldset>
  <div class="grid cols-15">
    <fieldset class="span-7 mb0">
      <legend>{{'options.design.colors' | translate}}</legend>
      <div class="grid cols-1 mb1">
        <div class="field span-1">
          <div class="grid cols-3">
            <div class="field noLabel span-1">
              <div class="inputColor" [style.backgroundColor]="settings.config.design.background">
                <input type="color" id="set-background" name="bg-color" [(ngModel)]="settings.config.design.background"
                  (ngModelChange)="settings.config.design.colorsId = 0">
              </div>
            </div>
            <div class="field noLabel span-2">
              <input type="text" aria-labelledby="set-background" name="bg-code" [(ngModel)]="settings.config.design.background"
                (ngModelChange)="settings.config.design.colorsId = 0"
                autocomplete="off">
            </div>
          </div>
          <label id="set-background" for="set-background">{{'options.design.bg' | translate}}</label>
        </div>
        <div class="field span-1">
          <div class="grid cols-3">
            <div class="field noLabel span-1">
              <div class="inputColor" [style.backgroundColor]="settings.config.design.foreground">
                <input type="color" id="set-foreground" name="fg-color" [(ngModel)]="settings.config.design.foreground" (ngModelChange)="settings.config.design.colorsId = 0">
              </div>
            </div>
            <div class="field noLabel span-2">
              <input type="text" aria-labelledby="set-foreground" name="fg-code" [(ngModel)]="settings.config.design.foreground" (ngModelChange)="settings.config.design.colorsId = 0" autocomplete="off">
            </div>
          </div>
          <label id="set-foreground" for="set-foreground">{{'options.design.fg' | translate}}</label>
        </div>
      </div>
      <div class="grid cols-4 pt1">
        <button
          *ngFor="let color of colors;"
          class="colorsBtn btn btnBlock span-1"
          [ngClass]="{'active': settings.config.design.colorsId === color.id}"
          [style.backgroundColor]="color.bg"
          [style.color]="color.fg"
          (click)="setColors(color)">
          abc
        </button>
      </div>
    </fieldset>
    <div class="span-1"></div>
    <fieldset class="span-7 mb0">
      <legend>{{'options.design.wallpaper' | translate}}</legend>
      <div class="grid cols-4 mb1">
        <div class="field span-3">
          <button class="btn btnBlock" type="button" (click)="bgImgFile.click()">{{'options.design.browseForImg' | translate}}</button>
          <input #bgImgFile name="imageUrl" type="file" class="btn" accept="image/*" (change)="encodeImage($event, bgImgFile)" />
          <label title="{{'options.design.dontSync' | translate}}">
            {{'options.design.customWallpaper' | translate}}
            <div class="icon" style="cursor: help; font-size: 1em;">help</div>
          </label>
        </div>
        <div class="span-1 wallpaperPreview"
          [style.backgroundImage]="'url('+ shared.bg +')'"
          [style.backgroundSize]="getBgSize()"
          [style.backgroundRepeat]="settings.config.design.imageSize === 10 ? 'repeat' : 'no-repeat'">
        </div>
        <div class="span-4" *ngIf="settings.config.design.patternId === -1">
          <div class="icon" style="font-size: 1em;">warning</div> {{'options.design.dontSync' | translate}}
        </div>
        <div class="field span-4">
          <options-range name="brightness" id="brightness" min="0" max="20" [(ngModel)]="settings.config.design.brightness"></options-range>
          <label title="{{'options.design.brightness' | translate}}">{{'options.design.brightness' | translate}}</label>
        </div>
        <div class="field span-2">
          <select name="fill" id="fill"
            [(ngModel)]="settings.config.design.imageSize">
            <option
              [ngValue]="s.id"
              *ngFor="let s of bgSize;">
              {{s.label}}
            </option>
          </select>
          <label for="fill">{{'options.design.fill' | translate}}</label>
        </div>
        <div class="field span-2">
          <select name="blend" id="blend"
            [(ngModel)]="settings.config.design.imageBlend">
            <option
              [ngValue]="b.id"
              *ngFor="let b of bgBlend;">
              {{b.label}}
            </option>
          </select>
          <label for="blend">{{'options.design.filter' | translate}}</label>
        </div>
      </div>
      <div class="grid cols-4 pt1">
        <button
          class="patternBtn btn btnBlock span-1"
          [ngClass]="{'active': settings.config.design.patternId === 0}"
          (click)="setPattern(noPattern)">
          <div class="icon" style="font-size: 1em;">remove</div>
        </button>
        <button
          *ngFor="let p of patterns;"
          class="patternBtn btn btnBlock span-1"
          [ngClass]="{'active': settings.config.design.patternId === p.id}"
          [style.backgroundColor]="settings.config.design.background"
          [style.backgroundBlendMode]="getBgBlend()"
          [style.background-image]="sanitizer.bypassSecurityTrustStyle('url(./assets/patterns/' + p.pattern + ')')"
          (click)="setPattern(p)">
          &nbsp;
        </button>
        <div class="span-4">
          <div class="icon" style="font-size: 1em;">info</div> {{'options.design.getMorePatterns' | translate | translateCut:0}}<a href="https://www.transparenttextures.com/">{{'options.design.getMorePatterns' | translate | translateCut:1}}</a>{{'options.design.getMorePatterns' | translate | translateCut:2}}<a href="https://www.toptal.com/designers/subtlepatterns/">{{'options.design.getMorePatterns' | translate | translateCut:3}}</a>{{'options.design.getMorePatterns' | translate | translateCut:4}}
        </div>
        <div class="span-4">
          <div class="icon" style="font-size: 1em;">info</div> {{'options.design.hardToSee' | translate}}
        </div>
      </div>
    </fieldset>
  </div>
</form>
